<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点管理页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <style>
        .title1{
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            float:left;
            font-size: 22px;   /*设置文字大小*/
            color:#0a0a0b;  /*设置文字颜色*/
            text-shadow: 0 8px 10px #434852;  /*设置文字阴影*/
            font-weight: bolder;  /*设置文字宽度*/
            text-align: center;  /*设置文字居中*/
            margin-top: -10px;
        }
        .addBtn{
            float: right;
            margin-top: -10px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div>
    <div class="title1">景点管理页面</div>
    <button class="el-button el-button--small addBtn" id="addBtn">添加景点</button>
    <table class="el-table" style="width: 100%;">
        <thead>
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>门票</th>
            <th>位置</th>
            <th>简介</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        <!-- Data rows will be dynamically inserted here -->
        </tbody>
    </table>
    <!-- 分页 -->
    <div class="el-pagination" id="pagination">
        <!-- Pagination will be dynamically inserted here -->
    </div>

    <!-- 修改景点对话框 -->
    <div class="el-dialog" id="alterDialog" style="display: none;">
        <div class="el-dialog__header">修改景点信息</div>
        <div class="el-dialog__body">
            <form id="alterForm">
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">id:</label>
                    <span id="nowScenicId"></span>
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">景点名称:</label>
                    <input type="text" class="el-input__inner" id="nowScenicName">
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">景点门票:</label>
                    <input type="text" class="el-input__inner" id="nowScenicPrice">
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">景点地址:</label>
                    <input type="text" class="el-input__inner" id="nowScenicAddress">
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">景点介绍:</label>
                    <input type="text" class="el-input__inner" id="nowScenicInfo">
                </div>
            </form>
        </div>
        <div class="el-dialog__footer dialog-footer">
            <button class="el-button" id="cancelBtn">取 消</button>
            <button class="el-button el-button--primary" id="sureCommitBtn">确 定</button>
        </div>
    </div>

    <!-- 添加景点对话框 -->
    <div class="el-dialog" id="addDialog" style="display: none;">
        <div class="el-dialog__header">添加景点</div>
        <div class="el-dialog__body">
            <form id="addForm">
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">景点名称:</label>
                    <input type="text" class="el-input__inner" id="formName" required>
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">门票:</label>
                    <input type="text" class="el-input__inner" id="formPrice" required>
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">地址:</label>
                    <input type="text" class="el-input__inner" id="formAddress" required>
                </div>
                <div class="el-form-item custom-item">
                    <label class="el-form-item__label">简介:</label>
                    <input type="text" class="el-input__inner" id="formInfo" required>
                </div>
            </form>
        </div>
        <div class="el-dialog__footer dialog-footer">
            <button class="el-button" id="resetFormBtn">重 置</button>
            <button class="el-button el-button--primary" id="addCommitBtn">确 定</button>
        </div>
    </div>
</div>

<script>
    const page = {
        currentPage: 1,
        pageSize: 5,
        total: 0
    };

    const tableBody = document.getElementById('tableBody');
    const pagination = document.getElementById('pagination');
    const alterDialog = document.getElementById('alterDialog');
    const addDialog = document.getElementById('addDialog');

    // 获取景点数据
    function getScenic() {
        axios.get('http://localhost:8080/scenicSpotProject/', { params: { pageCurr: page.currentPage, pageSize: page.pageSize } })
            .then(res => {
                if (res.data && res.data.code === 1) {
                    const data = res.data.data.list;
                    tableBody.innerHTML = '';
                    data.forEach(item => {
                        const row = `
                                <tr>
                                    <td>${item.scenicId}</td>
                                    <td>${item.scenicName}</td>
                                    <td>${item.scenicPrice}</td>
                                    <td>${item.scenicAddress}</td>
                                    <td>${item.scenicInfo}</td>
                                    <td>
                                        <button class="el-button el-button--text" onclick="alterClick(${JSON.stringify(item)})">修改</button>
                                        <button class="el-button el-button--text" style="color: red;" onclick="openConfirm(${item.scenicId})">删除</button>
                                    </td>
                                </tr>
                            `;
                        tableBody.innerHTML += row;
                    });
                    page.total = res.data.data.totalSize;
                    updatePagination();
                } else {
                    alert('服务器出错');
                }
            });
    }

    // 更新分页
    function updatePagination() {
        pagination.innerHTML = '';
        const totalPages = Math.ceil(page.total / page.pageSize);
        for (let i = 1; i <= totalPages; i++) {
            pagination.innerHTML += `
                    <button class="el-pager__item" ${i === page.currentPage ? 'style="font-weight: bold;"' : ''} onclick="changePage(${i})">${i}</button>
                `;
        }
    }

    function changePage(newPage) {
        page.currentPage = newPage;
        getScenic();
    }

    // 删除确认
    function openConfirm(id) {
        if (confirm('此操作将删除该景点信息, 是否继续?')) {
            deleteScenic(id);
        }
    }
    //
    // // 删除景点
    // function deleteScenic(id) {
    //     axios.get('/scenic/delete', { params: { id } })
    //         .then(res => {
    //             if (
</script>
